<!--
    组件名称：文本高亮组件
    示例：<HighlightText text="这是一段示例文本" keyword="示例" />
 -->
<template>
  <span class="text" v-html="highlightedText"></span>
</template>

<script setup>
const props = defineProps({
  //要高亮的文本内容
  text: {
    type: String,
    default: '',
  },
  //要高亮的关键词
  keyword: {
    type: String,
    default: '',
  },
  //高亮的颜色
  highlightColor: {
    type: String,
    default: '#f56c6c',
  },
  //高亮的背景色
  highlightBgColor: {
    type: String,
    default: 'rgba(245, 108, 108, 0.1)',
  },
  //是否使用粗体
  bold: {
    type: Boolean,
    default: true,
  },
  //是否区分大小写
  caseSensitive: {
    type: Boolean,
    default: false,
  },
  //自定义高亮的CSS类名
  customClass: {
    type: String,
    default: '',
  },
});

// 生成高亮样式
const highlightStyle = computed(() => {
  const styles = [
    `color: ${props.highlightColor}`,
    `background-color: ${props.highlightBgColor}`,
    'padding: 0 2px',
    'border-radius: 2px',
  ];

  if (props.bold) {
    styles.push('font-weight: bold');
  }

  return styles.join(';');
});

// 生成高亮的HTML
const highlightedText = computed(() => {
  if (!props.text || !props.keyword) {
    return props.text || '';
  }
  // 简单文本替换
  const flags = props.caseSensitive ? 'g' : 'gi';
  const regex = new RegExp(`(${escapeRegExp(props.keyword)})`, flags);

  if (props.customClass) {
    return props.text.replace(regex, `<span class="${props.customClass}">$1</span>`);
  } else {
    return props.text.replace(regex, `<span style="${highlightStyle.value}">$1</span>`);
  }
});

/**
 * 转义正则表达式特殊字符
 * @str {string} 传入的文本
 * */
const escapeRegExp = (str) => {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};
</script>
